<template>
  <div class="app-container calendar-list-container">
    <el-form label-position="left" label-width="100px">
      <el-row>
        <el-col :span="14">
          <a @click="back()">
            <span class="back-link"><svg-icon icon-class="ds-left-double-arrow" /> 返回</span>
          </a>
          <el-card class="box-card">
            <p class="form-header">
              <svg-icon icon-class="ds-person" />个人信息
            </p>
            <el-form-item label="姓名">
              {{param.username}}
            </el-form-item>
            <el-form-item label="账号">
              {{param.account}}
            </el-form-item>
            <el-form-item label="手机号">
              {{param.phone}}
            </el-form-item>
            <el-form-item label="权限组">
              {{param.group_name}}
            </el-form-item>
          </el-card>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<style scoped>
  .back-link {
    display: block;
    padding: 0px 0 15px;
  }
  .normal-person {
    color: #4ebef6;
  }
  .high-person {
    color: #fc9336;
  }
  .text {
    font-size: 14px;
  }
  .box-card .el-form-item {
    margin-bottom: 11px;
    padding-bottom: 11px;
    border-bottom: solid 1px #eee;
  }
  .box-card .el-form-item:last-child {
    border: none;
  }
  .box-card .el-form-item .el-row {
    line-height: 50px;
    border-bottom: solid 1px #eee;
  }
  .box-card .el-form-item .el-row:last-child {
    border: none;
  }
  .update-pass {
    float: right;
    font-size: 14px;
    font-weight: normal;
    color: #ff7357;
  }
  .item {
    margin-bottom: 18px;
  }
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .pdl10 {
    padding-left: 10px;
  }
  .form-header {
    /* padding-left: 10px; */
    color: #606266;
    font-weight: 700;
  }
  .form-header svg {
    color: #ed8a94;
    font-size: 20px;
    margin-right: 10px;
  }
  .el-form-item__label {
    font-weight: normal;
  }
  .clearfix:after {
    clear: both
  }
  .el-card__header {
    background-color: #4fb1e2;
    color: #ffffff;
    line-height: 58px;
    padding: 0 10px 0 20px;
  }
  .el-card__header button {
    color: #ffffff;
    float: right;
    padding: 3px 0;
    margin: 15px 10px;
  }
  .el-card__header button i {
    font-size: 20px;
  }
  .el-card__header svg {
    font-size: 28px;
    float: right;
    padding: 3px 0;
    margin: 15px 5px;
    cursor: pointer;
  }
  .el-col:nth-child(3n){
    clear: right;
  }
  .back-link {
    color: #ed8a94;
    font-size: 14px;
  }
  .back-link svg {
    font-size: 12px;
  }
  .el-transfer-panel__body {
    height: 203px;
  }
  .el-transfer-panel__list.is-filterable {
    height: 149px;
  }
  .el-transfer-panel .el-transfer-panel__header .el-checkbox .el-checkbox__label {
    font-size: 14px;
  }
  .el-col {
    margin-bottom: 0px!important;
  }
  .el-checkbox-button__inner {
    border-left: 1px solid #dcdfe6;
    border-radius: 0!important;
    margin-right: 10px;
  }
</style>
<script>
import { getUserInfo } from '@/api/user'
export default {
  data() {
    return {
      tableKey: 0,
      type: 'create',
      param: {},
      username: '',
      truename: '',
      status_text: '',
      level_text: '',
      id: ''
    }
  },
  created() {
    this.id = this.$route.params.id
    this.initData()
  },
  methods: {
    // 初始化数据
    initData() {
      getUserInfo({ id: this.id }).then(response => {
        this.param = response.data
      })
    },
    back() {
      window.history.go(-1)
    }
  }
}
</script>
